<template>
  <div class="col-md-4">
    <form class="form-horizontal">
      <div class="form-group">
        <label>用户名</label>
        <input type="text" class="form-control" v-model="name" placeholder="用户名">
      </div>
      <div class="form-group">
        <label>评论内容</label>
        <textarea class="form-control" rows="6" v-model="age" placeholder="评论内容"></textarea>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="button" class="btn btn-default pull-right" @click="add">提交</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  // props: {
  //   // 接收父组件传递过来的函数
  //   addComment: {
  //     type: Function,
  //     required: true
  //   }
  // },
  methods: {
    add () {
      let name = this.name
      let age = this.age
      let comment = {
        name,
        age
      }
      // 调用父组件传递的函数
      // this.addComment(comment) // 方式一
      this.$emit('addCom', comment) // 方式二
      this.name = ''
      this.age = ''
    }
  },
  data () {
    return {
      name: '',
      age: ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
